<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>直播弹幕列表</title>
    <!-- 引入 Bootstrap -->
    <!--
        <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">

</head>

<style>
    a{
        color: #ffffff;
    }
    h1{
        /*文字对齐*/
        text-align: center;
    }
</style>

<body>

<div class="container">
    <h1>直播弹幕系统</h1>
    <form th:action="@{/barrage-log/list(pn=1)}" th:method="post">
      <!--  网站类型<input type="text" name="typeCode" th:value="${typeCode}"/>
        <input type="submit" value="查询"/>-->
        <div class="row cl">
            <label class="form-label col-xs-2 col-sm-2"><span class="c-red">*</span>平台：</label>
            <div class="formControls col-xs-10 col-sm-10">
                <select name="typeCode" lay-search="" class="form-control input1" >
                    <option value="">--请选择平台--</option>
                    <option th:each="item:${types}"
                            th:value="${item.code}"
                            th:selected="${typeCode==item.code}"
                            th:text="${item.message}" value="">
                    </option>
                </select>
            </div>
        </div>
        <input type="submit" value="查询"/>
    </form>

    <!--table-striped:斑马线格式，table-bordered：带边框的表格，table-hover：鼠标悬停高亮的表格-->
    <table class="table table-striped table-bordered table-hover text-center">
        <thead>
        <tr style="text-align:center">
            <!--        th标签定义html表格中的表头单元格-->
            <th style="text-align:center">序号</th>
            <th style="text-align:center">id</th>
            <th style="text-align:center">平台名称</th>
            <th style="text-align:center">房间号</th>
            <th style="text-align:center">用户名</th>
            <th style="text-align:center">弹幕时间</th>
            <th style="text-align:center">弹幕内容</th>
        </tr>
        </thead>
        <!--tr标签定义html表格中的所有行-->
        <!--    遍历集合，如果被遍历的变量users为null或者不存在，则不会进行遍历，也不会报错-->
        <tr th:each="barrageLog ,stat:${page.list}">
            <!--        td标签定义html表格中的标准单元格-->
            <td style="vertical-align: middle!important;" th:text="${stat.index+1}"></td>

            <td style="vertical-align: middle!important;" th:text="${barrageLog.id}"></td>
            <td style="vertical-align: middle!important;" th:text="${barrageLog.typeName}"></td>
            <td style="vertical-align: middle!important;" th:text="${barrageLog.roomId}"></td>
            <td style="vertical-align: middle!important;" th:text="${barrageLog.userName}"></td>
            <td style="vertical-align: middle!important;" th:text="${#dates.format(barrageLog.createTime,'yyyy-MM-dd HH:ss:mm')} "></td>
            <td style="vertical-align: middle!important;" th:text="${barrageLog.content}"></td>
            <!--<td>
                &lt;!&ndash;         a标签用来定义超链接 href表示超链接&ndash;&gt;
                <a class="btn btn-primary" th:href="@{'/api/v1/user/updatePage/'+${user.userId}}">更改</a>
                <a class="btn btn-danger" th:href="@{'/api/v1/user/delete/'+${user.userId}}">删除</a>
            </td>-->
        </tr>
    </table>

    <!-- 显示分页信息 -->
    <div class="row">
        <!--分页文字信息  -->
        <div class="col-md-6" >当前 [[${page.pageNum}]]页,总[[${page.pages }]]
            页,总[[ ${page.total }]] 条记录</div>
        <!-- 分页条信息 -->
        <div class="col-md-6">
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <!--点击首页会跳转到第一页，并且首页禁用-->
                    <th:block th:if="${page.pageNum==1}">
                        <li class="active,disabled">
                            <a>首页</a></li>
                    </th:block>

                    <th:block th:if="${page.pageNum>1}">
                        <li><a th:href="@{/barrage-log/list(pn=1,typeCode=${typeCode})}">首页</a></li>
                    </th:block>

                    <li  th:if="${page.hasPreviousPage}">
                        <a  th:href="@{/barrage-log/list(pn=${page.pageNum-1},typeCode= ${typeCode})}">
                            <span aria-hidden="true">&laquo;</span>

                        </a>
                    </li>

                    <!--遍历页码，只显示五页，点击下一页之后，每次多遍历两个页码-->
                    <th:block  th:if="${page.pageNum<=3}" th:each="i:${#numbers.sequence(1,5)}">
                        <!--加判断是不是当前页，如果是 高亮显示，并且取消超链接，这样避免了点击当前页重复发送请求查询数据-->
                        <th:block th:if="${page.pageNum==i}">

                            <li  class="active" >
                                <a th:text="${i}"></a>
                            </li>
                        </th:block>

                        <th:block th:if="${page.pageNum!=i}">
                            <li>
                                <a th:text="${i}" th:href="@{/barrage-log/list(pn=${i},typeCode=${typeCode}) }"></a>
                            </li>
                        </th:block>


                    </th:block>


                    <th:block th:if="${page.pageNum>3 && page.pageNum+2<=page.pages}"
                              th:each="i:${#numbers.sequence(page.pageNum-2,page.pageNum+2)}">
                        <!--同理上-->
                        <th:block th:if="${page.pageNum==i}">

                            <li  class="active" >
                                <a th:text="${i}"></a>
                            </li>
                        </th:block>

                        <th:block th:if="${page.pageNum!=i}">
                            <li>
                                <a th:text="${i}" th:href="@{/barrage-log/list(pn=${i},typeCode= ${typeCode})}"></a>
                            </li>
                        </th:block>


                    </th:block>



                    <th:block th:if="${page.pageNum+2>page.getPages()}"
                              th:each="i:${#numbers.sequence(page.getPages()-4,page.getPages())}">
                        <!--同理上-->
                        <th:block th:if="${page.pageNum==i}">

                            <li  class="active,disabled" >
                                <a th:text="${i}"></a>
                            </li>
                        </th:block>

                        <th:block th:if="${page.pageNum!=i}">
                            <li>
                                <a th:text="${i}" th:href="@{/barrage-log/list(pn=${i},typeCode= ${typeCode})}"></a>
                            </li>
                        </th:block>


                    </th:block>




                    <!--下一页-->
                    <li  th:if="${page.hasNextPage}">
                        <a  th:href="@{/barrage-log/list(pn=${page.pageNum+1},typeCode= ${typeCode})}">
                            <span aria-hidden="true">&raquo;</span>
                        </a></li>


                    <!--点击末页会跳转到最后一页，并且最后一页禁用-->
                    <th:block th:if="${page.pageNum<page.pages}">
                        <li > <a th:href="@{/barrage-log/list(pn=${page.pages},typeCode= ${typeCode})}">末页</a></li>

                    </th:block>

                    <th:block th:if="${page.pageNum==page.pages}">
                        <li class="active,disabled"> <a>末页</a></li>
                    </th:block>


                </ul>
            </nav>
        </div>
    </div>
</div>
</body>

</html>





